<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="130px">
          <el-card>
            <div slot="header" class="clearfix">
                <span>订单信息</span>
            </div>
            <el-table :data="orderList" border>
              <el-table-column type="index" width="55" align="center" />
              <el-table-column label="订单编号" prop="orderNo"></el-table-column>
              <el-table-column label="部门" align="center" prop="deptName"/>
              <el-table-column label="订单类型" align="center" prop="type">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.tms_order_type" :value="scope.row.type" />
                </template>
              </el-table-column>
              <el-table-column label="是否暂存" align="center" prop="isStaging">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.tms_staging_status" :value="scope.row.isStaging" />
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="memo" />
            </el-table>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="部门" prop="deptId">
                  <treeselect v-model="form.deptId" append-to-body :options="deptOptions" :show-count="true" placeholder="请选择所属机构"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单号" prop="orderNo">
                  <el-input v-model="form.orderNo" placeholder="请输入订单号" disabled style="width: 220px"/>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="委托单号" prop="entrustNo">
                  <el-input v-model="form.entrustNo" placeholder="请输入委托单号" style="width: 220px"/>
                </el-form-item>
              </el-col> -->
             <!-- <el-col :span="6">
                <el-form-item label="订单状态">
                  <dict-tag :options="dict.type.tms_order_status" :value="form.status" />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="客户名称" prop="clientName">
                  <el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 220px"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户联系人" prop="clientContacts">
                  <el-input v-model="form.clientContacts" placeholder="请输入客户联系人" style="width: 220px"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户联系电话" prop="clientTel">
                  <el-input v-model="form.clientTel" placeholder="请输入客户联系电话" style="width: 220px"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
              <span>地址信息</span>
            </div>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-card style="height: 330px;">
                  <div slot="header" class="clearfix">
                    <span>发货信息</span>
                  </div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="寄件单位" prop="sendAddr">
                        <el-input v-model="form.sendAddr" placeholder="请输入寄件地址简称" style="width: 220px"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="寄件联系人" prop="sendContacts">
                        <el-input v-model="form.sendContacts" placeholder="请输入寄件联系人" style="width: 220px"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-form-item label="寄件联系电话" prop="takeTel">
                        <el-input v-model="form.sendTel" placeholder="请输入寄件联系电话" style="width: 220px"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-form-item label="寄件地址" prop="sendAddress">
                        <el-input v-model="form.sendAddress" placeholder="请输入内容" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card style="height: 330px;">
                  <div slot="header" class="clearfix">
                    <span>收货信息</span>
                  </div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="收件单位" prop="takeAddr">
                        <el-input v-model="form.takeAddr" placeholder="请输入收件地址简称" style="width: 220px"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="收件联系人" prop="takeContacts">
                        <el-input v-model="form.takeContacts" placeholder="请输入收件联系人" style="width: 220px"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-form-item label="收件联系电话" prop="takeTel">
                        <el-input v-model="form.takeTel" placeholder="请输入收件联系电话" style="width: 220px"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-form-item label="收件地址" prop="takeAddress">
                        <el-input v-model="form.takeAddress" placeholder="请输入内容" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-form-item label="收件备注" prop="takeMemo">
                        <el-input v-model="form.takeMemo" type="textarea" placeholder="请输入内容" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
              <span>派车信息</span>
            </div>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="线路" prop="lineId">
                  <el-select v-model="form.lineId" placeholder="请选择线路" clearable @change="lineChange">
                    <el-option v-for="item in lineOptions" :key="item.id" :label="item.name"
                      :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="车次" prop="scheduleDayName">
                  <el-autocomplete
                  placeholder="请选择车次"
                  :fetch-suggestions="scheduleSearch"
                  value-key="scheduleDayName"
                  v-model="form.scheduleDayName"
                  @select="scheduleChange">
                  <template slot-scope="{ item }">
                      <el-descriptions :column="2" border style="width: 200px;">
                        <el-descriptions-item label="车次">{{item.name}}</el-descriptions-item>
                        <el-descriptions-item label="日期">
                          {{ parseTime(item.day, '{y}-{m}-{d}') }}
                        </el-descriptions-item>
                      </el-descriptions>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="车辆" prop="carId">
                  <el-select v-model="form.carId" placeholder="请选择车辆" clearable size="small" @change="carChange">
                    <el-option v-for="item in scheduleDtlOptions" :key="item.carId" :label="item.carNumber"
                      :value="item.carId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="司机" prop="driverId">
                  <el-input v-model="form.driverName"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
                <span>财物清单</span>
            </div>
            <el-table :data="form.items" border>
              <el-table-column type="index" width="55" align="center" />
              <el-table-column label="编号" prop="pno"></el-table-column>
              <el-table-column label="名称" prop="name"></el-table-column>
              <el-table-column label="数量" prop="nums"></el-table-column>
            </el-table>
          </el-card>
        </el-form>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {listOrder,orderDtlsById,addOrderAll} from '@/api/tms/order'
  import {listLines} from '@/api/tms/lines'
  import {listCar} from '@/api/tms/car'
  import {listDriver} from '@/api/tms/driver'
  import {treeselect} from '@/api/system/dept'
  import {getScheduleByLineId,getScheduleDtlByScheduleId,dispatch} from '@/api/tms/dispatch'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components:{Treeselect},
    dicts: ['tms_order_type','tms_staging_status','tms_order_status'],
    data(){
      return{
        ids:undefined,
        form:{},
        rules:{
          lineId: [{
            required: true,
            message: "线路不能为空",
            trigger: "blur"
          }],
          scheduleId: [{
            required: true,
            message: "车次不能为空",
            trigger: "blur"
          }],
          carId: [{
            required: true,
            message: "车辆不能为空",
            trigger: "blur"
          }],
          driverId: [{
            required: true,
            message: "司机不能为空",
            trigger: "blur"
          }],
        },
        orderList:[],
        orderDtlList:[],
        deptOptions:[],
        lineOptions:[],
        scheduleOptions:[],
        scheduleDtlOptions:[],
      }
    },
    created() {
      this.ids = this.$router.currentRoute.params.ids;
      this.getList();
      this.getLines();
      this.getDept();
    },
    methods:{
      getList(){
        orderDtlsById(this.ids).then(response=>{
          this.form = response.data.vo;
          this.orderList = response.data.orders;
        })
      },
      /** 查询部门下来数据 */
      getDept(){
        treeselect().then(response=>{
          this.deptOptions = response.data;
        })
      },
      /** 查询线路列表 */
      getLines(){
        listLines().then(response=>{
          this.lineOptions = response.rows;
        })
      },
      lineChange(e){
        getScheduleByLineId({lineId:e}).then(response=>{
          this.scheduleOptions = response.data;
        })
      },
      scheduleChange(e){
        console.info('e===>',e)
        this.form.scheduleId = e.id;
        getScheduleDtlByScheduleId({'scheduleId':e.id}).then(response=>{
          this.scheduleDtlOptions = response.data;
        })
      },
      carChange(e){
        if(this.scheduleDtlOptions.length > 0){
          this.scheduleDtlOptions.forEach(item=>{
            if(item.carId == e){
              this.form.driverId = item.driverId;
              this.form.driverName = item.driverName;
            }
          })
        }
      },

      //地址选择
      scheduleSearch(queryString,cb){
        var restaurants = this.scheduleOptions;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.scheduleDayName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/order",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
      submitForm(){
        this.form.orderIds = this.ids.split(',');
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            addOrderAll(this.form).then(response => {
              this.$modal.msgSuccess("派车成功");
              this.close();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
<style>
  .el-popper[x-placement^=bottom] {
    width:15vw !important;
  }
</style>
